<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <title>积分</title>
        <link rel="stylesheet" type="text/css" href="css/aui/integral1.css">
</head>
<body>
    <header class="aui-bar aui-bar-nav" style="color: #CCC;border-bottom: 1px solid;" >
        <a href="person.html" class="aui-pull-left">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" style="color: #121;">积分</div>
    </header>
    <div class="aui-row">
        <div class="aui-col-xs-12" style="text-align: center;background-color: #fff;font-size: 25px; ">
            <!--<i class="aui-iconfont aui-icon-home">288</i>-->
            <!--<div class="aui-grid-label">积分</div>-->
            <a style="color: #121;line-height: 50px;">288</a>
        </div>
    </div>
    <!--<div class="aui-row">-->
        <!--<div class="aui-col-xs-6" style="text-align: center;">-->
            <!--收入-->
        <!--</div>-->
        <!--<div class="aui-col-xs-6" style="text-align: center;">-->
            <!--支出-->
        <!--</div>-->
    <!--</div>-->
    <div class="aui-tab" id="tab">
        <div class="aui-tab-item aui-active ">收入</div>
        <div class="aui-tab-item">支出</div>
    </div>
    <div class="aui-list aui-media-list" id="s1">
        <div class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner" >
                    <div class="aui-list-item-title">
                        每日任务：移动端签到
                    </div>
                    <div class="aui-list-item-text">
                       2017-3-31
                    </div>
                </div>
                <div class="aui-list-item-media" style="line-height: 40px; color: #c7254e;" >
                    +3
                </div>
            </div>
        </div>
    </div>
    <div class="aui-list aui-media-list" style="display: none" id="s2">
        <div class="aui-list-item">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-inner" >
                    <div class="aui-list-item-title">
                        礼品兑换
                    </div>
                    <div class="aui-list-item-text">
                        2017-3-31
                    </div>
                </div>
                <div class="aui-list-item-media" style="line-height: 40px; color: #1abc9c;" >
                    -2
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/aui/aui-tab.js" ></script>
    <script type="text/javascript" src="js/aui/jquery-2.1.4.min.js" ></script>
    <script type="text/javascript">
        apiready=function () {
            api.parseTapmode();
        };
        var tab=new auiTab({
            element:document.getElementById("tab")
        },function (ret) {
            console.log(ret);
            if(ret){
                $('#s1').css('display','none');
                $('#s2').css('display','none');
                $('#s'+ret.index).css('display','block');
//                document.getElementById("demo").textContent=ret.index;
            }

        });
    </script>
</body>
</html>